@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;

@mixin fillUp() {
  width: 0;
  height: 100%;
  overflow: hidden;
  visibility: visible;
  position: absolute;
  top: 0;
}

@include ns.b(checkbox) using ($b) {
  #{fun.getCssVarName($b, transitionDuration)}: 0.3s;
  $transition: width #{fun.getCssVarValue($b, transitionDuration)} linear;
  display: flex;
  align-items: center;

  @include ns.b($b) using ($b) {
    @include ns.e(change) using ($e) {
      width: fit-content;
      padding: 0;
      border-radius: 8rpx;
      margin-right: 16rpx;
      width: 40rpx;
      font-size: 20rpx;

      @include ns.b(button) using ($bb) {
        @include ns.e(shadow) using ($e) {
          display: none;
        }
        @include ns.e(loading) using ($e) {
          display: none;
        }
        @include ns.e(content) using ($e) {
          padding-top: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      &-icons {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      &-icon {
        visibility: hidden;

        &:first-child {
          transition: $transition;
          right: 0;
          @include fillUp();

          & > :nth-child(n) {
            position: absolute;
            right: 0;
            left: initial;
          }
        }

        &:last-child {
          @include fillUp();
        }
      }
    }
  }

  @include ns.s(active) using ($s) {
    @include ns.b($b) using ($b) {
      @include ns.e(change) using ($e) {
        &-icon {
          &:first-child {
            width: 100%;
            opacity: 0;
          }

          &:last-child {
            width: 100%;
            transition: $transition;
          }
        }
      }
    }
  }

  @include ns.s(disabled) using ($s) {
    color: fun.getCssVarValue(disabled-textColor);
    cursor: no-drop;
    pointer-events: none;
  }
}
